<template>
  <div>
    <span class="title">用户名:</span>
    <el-input
        style="width: 20%"
        placeholder="请输入内容"
        v-model="page.userName"
        clearable>
    </el-input>
    <span class="title">手机号:</span>
    <el-input
        style="width: 20%"
        placeholder="请输入内容"
        v-model="page.userPhone"
        clearable>
    </el-input>
    <span class="title">邮箱:</span>
    <el-input
        style="width: 20%"
        placeholder="请输入内容"
        v-model="page.email"
        clearable>
    </el-input>
    <el-button type="primary" style="margin-left: 30px" size="small" icon="el-icon-search" @click="init">搜索</el-button>
    <el-table
        :data="list"
        style="width: 100%">
      <el-table-column
          label="序号">
        <template slot-scope="scop">
          {{ scop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="uname"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="ugender"
          label="性别">
      </el-table-column>
      <el-table-column
          label="头像">
        <template slot-scope="scop">
          <el-avatar size="large" :key="scop.row.uheader" :src="`${scop.row.uheader}`"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="uphone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="uemail"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="uregisterTime"
          label="注册时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.ustatus===0?'正常':'封禁'" placement="top">
            <el-switch
                @change="banUser(scope.row)"
                v-model="scope.row.ustatus"
                active-color="#ff4949"
                inactive-color="#13ce66"
                :active-value="9"
                :inactive-value="0">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <Page style="text-align: center" method-name="userPage" @getList="getList" :page="page"></Page>
  </div>
</template>

<script>
import Page from "@/pages/common/Page";

export default {
  name: "UserList",
  components: {Page},
  data() {
    return {
      list: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async init() {
      const promise = await this.$baseApi.callPostMethod("userPage", this.page);
      const data = promise.data
      if (data.code === 200) {
        this.list = data.data.records
        this.page.total = data.data.total
      }
    },
    async banUser(user) {
      const promise = await this.$baseApi.callPostMethod(`banUser`, user);
      const data = promise.data
      if (data.code === 200) {
        this.$message.success("操作成功!")
        await this.init()
      } else this.$message.error(data.msg)
    },
    getList(list) {
      this.list = list
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
.title{
  margin:0 15px;
}
</style>